<!--首页-->
<template>
  <div class="all bg1" ref="content" @qiyuMsgCount="qiyuMsgCount" @viewappear="viewappear">
    
    <!--导航栏-->
    <div class="bar">
      <LImage class="img-bar" :src="Config.img('v2_saoma.png')" @click="scanClick"></LImage>
      <div class="width30"></div>
      <LImage class="img-bar" :src="Config.img('v2_kouling.png')" @click="vlinkClick"></LImage>

      <text class="font34 text2 tCenter all">{{T('首页')}}</text>

      <div>
        <LImage class="img-bar" :src="Config.img('v2_kefu.png')" @click="serveClick"></LImage>
        <div class="spot-qiyu main1" v-if="qiyuMsg"></div>
      </div>

      <div class="width30"></div>
      <div>
        <LImage class="img-bar" :src="Config.img('v2_xiaoxi.png')" @click="newsClick"></LImage>
        <div class="spot-unread main1" v-if="unreadMsg"></div>
      </div>
    </div>

    <!--内容-->
    <scroller class="all">
      <!--刷新-->
      <refresh @refresh="httpHome" :display="isRefresh ? 'show' : 'hide'">
        <loading-indicator class="load text2"></loading-indicator>
      </refresh>

      <div class="wrapper" v-if="data">

        <!--资产-->
        <div class="login bg2" v-if="!Config.isLogin">
          <LImage  class="img-login" :src="Config.img('v2_denglu_bg.png')">></LImage>

          <text class="font30 text2 all">{{T('登录即享专业量化交易服务')}}</text>
          <div class="login-but main-b1" @click="loginClick">
            <text class="font30 main-t1">{{T('登录')}}</text>
          </div>
        </div>
        <div class="login bg2" v-else-if="isApi" @click="addApiClick">
          <LImage  class="img-login" :src="Config.img('v2_denglu_bg.png')">></LImage>

          <text class="font30 text2 all">{{T('现在录入API，免费体验量化策略交易')}}</text>
          <LImage class="img-arrow" :src="Config.img('jiantou_lan.png')"></LImage>
        </div>
        <VAssets class="assets" v-else @click="assetsClick"></VAssets>

        <!--菜单-->
        <VFunction class="function" @click="functionClick"></VFunction>

        <!--公告-->
        <VNotice class="notice" v-if="notice" :notice="notice" @click="noticeClick"></VNotice>

        <!--活动-->
        <VBanner class="activity" v-if="activitys.length" :banners="activitys" @click="activityClick"></VBanner>

        <!--BTC减半倒计时-->
        <VTitle class="title" type="line-hong" v-if="CdEndTime" :arrow="false" :title="T('BTC减半倒计时')"></VTitle>
        <VCountdown class="countdown" v-if="CdEndTime"
        :currentTIme="CdCurrentTime"
        :startTime="CdEndTime" 
        :endTime="CdEndTime" 
        :dayTxt="'天'" 
        :hourTxt="'时'" 
        :minutesTxt="'分'" 
        :secondsTxt="'秒'" />
        
        <!--策略精选-->
        <VTitle class="title" v-if="strategy" :title="T('策略精选')" :subtitle="T('更多')" @click="strategyClick"></VTitle>
        <VShop class="strategy" v-if="strategy" :item="strategy" @click="strategyClick"></VShop>
       
        <!--年化榜收益-->
        <VTitle class="title" v-if="rankings && rankings.length" :title="T('排行榜')" :subtitle="T('更多')" :type="'line-hong'" @click="rankingClick"></VTitle>
        <VRanking class="ranking" v-if="rankings && rankings.length" :rankings="rankings" @click="rankingClick"></VRanking>

        <!--大V说量化-->
        <VTitle class="title" v-if="article" :title="T('大V说量化')" :subtitle="T('更多')" :type="'line-hong'" @click="dvClick(article.manyLinkUrl)"></VTitle>
        <VArticle class="article" v-if="article" :article="article" @click="dvClick"></VArticle>

        <!--平台-->
        <div class="height40"></div>
        <div class="logo">
          <div class="logo-line1 bg2"></div>
          <div class="column acenter">
            <text class="font20 text3">{{T('数字资产AI量化服务平台')}}</text>
            <div class="height10"></div>
            <text class="font20 text3">{{T('Go with Vtrading to Victory')}}</text>
          </div>
          <div class="logo-line2 bg2"></div>
        </div>
      </div>
    </scroller>

    <!-- <div class="task" :style="{'right':taskRight, 'bottom':taskBottom}" 
         @panstart="startPan" @panmove="movePan" @panend="endPan"
         @click="taskClck">

      <div class="task-label bg4" v-if="isTask">
        <text class="font18 text2">{{T('有奖励待领取哦～')}}</text>
      </div>
      <div class="task-label" v-else></div>

      <LImage  class="img-task" :src="Config.img(isEnd ? 'v2_rw_xuanfu_en.png': 'v2_rw_xuanfu.png')">></LImage>
      <div class="task-tag1" v-if="isTask">
        <div class="task-tag2"></div>
      </div>
    </div> -->
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.wrapper{
  padding-left: 20px;
  padding-right: 20px;
}
.load {
  height: 40px;
  width: 40px;

  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 355px;
}
.img-arrow{
  width:12px;
  height:19px;
  margin-left: 10px;
}

/************* 任务 */
.task {
  position: absolute;
  flex-direction: column;
  align-items: center;
  width: 200px;
  height: 252px;
}
.task-label {
  justify-content: center;
  min-height: 42px;
  border-radius: 6px;
  padding-left: 10px;
  padding-right: 10px;
}
.task-tag1 {
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background-color: #FFFFFF;

  right: 25px;
  bottom: 55px;
}
.task-tag2 {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  
  background-color: #FF3939;
}
.img-task {
  width: 192px;
  height: 210px;
}
/************* 导航栏 */
.bar{
  flex-direction: row;
  align-items: center;
  height: 88px;
  padding-left: 40px;
  padding-right: 40px;
}
.spot-qiyu {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 7px;
  top: 0;
  right: 0;
}
.spot-unread {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 7px;
  top: 0;
  right: 0;
}
.img-bar{
  width: 62px;
  height: 62px;
}

/*********************** 登录*/
.login{
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  border-radius: 24px;

  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  padding-bottom: 30px;

  margin-top: 20px;
}
.login-but{
  flex-direction: row;
  align-items: center;

  height: 54px;
  border-radius: 54px;

  border-width: 1px;

  padding-left: 40px;
  padding-right: 40px;

  margin-left: 10px;
}
.img-login {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/*********************** 资产*/
.assets {
  margin-top: 20px;
}

/*********************** 功能*/
.function {
  margin-top: 40px;
}

/*********************** 公告*/
.notice{
  margin-top: 54px;
  margin-left: 30px;
  margin-right: 30px;
}

/*********************** 活动*/
.activity{
  margin-top: 34px;
}

/************* 标题 */
.title{
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 40px;
}
/*********************** 倒计时*/
.countdown{
  margin-top: 20px;
}
/*********************** 策略精选*/
.strategy {
  margin-top: 20px;
}

/*********************** 年化排行版*/
.ranking{
  margin-top: 20px;
}

/*********************** 大V说量化*/
.article{
  margin-top: 20px;
}

/*********************** Login*/
.logo {
  position: absolute;
  flex-direction: row;
  align-items: center;

  left: 0;
  right: 0;
  bottom: -140px;
}
.logo-line1{
  flex: 1;
  height: 4px;
  margin-right: 10px;
}
.logo-line2{
  flex: 1;
  height: 4px;
  margin-left: 10px;
}
</style>

<script>

//组件
import VAssets from '@/home/view/VAssets.vue'; 
import VFunction from '@/home/view/VFunction.vue'; 
import VNotice from '@/home/view/VNotice.vue'; 
import VBanner from '@/home/view/VBanner.vue'; 


import VTitle from '@/home/view/VTitle.vue'; 
import VShop from '@/_public/VShop.vue'; 
import VRanking from '@/home/view/VRanking.vue'; 
import VArticle from '@/home/view/VArticle.vue'; 
import VCountdown from '@/home/view/VCountdown'


//功能
import jdebug from "@/_js/debug"; 
import jnavigator from "@/_js/navigator"; 
import jhttps from "@/_js/https";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import japi from "@/_js/api";
import jconfig from "@/_js/config";
import jvlink from "@/_js/vlink";

const globalEvent = weex.requireModule('globalEvent');
const weexFunction = weex.requireModule("WeexFunction");
const dom = weex.requireModule("dom");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  components: {
    VAssets,
    VFunction,
    VNotice,
    VBanner,

    VTitle,
    VShop,
    VRanking,
    VArticle,
    VCountdown
  },

  //变量
  data() {
    return {
      T:T,
      Config:jconfig,
      isRefresh:false, //显示刷新
      isEnd:false, //true 英文

      isApi:true, //true 有API
      isScan:false, //true 跳转扫码中
      qiyuMsg:false, //true 七鱼有未读消息
      unreadMsg:false, //true 系统有未读消息

      data:undefined, //基础数据
      notice:undefined, //公告
      activitys:undefined, //活动
      strategy:undefined, //策略精选
      rankings:undefined, //榜单
      article:undefined, //文章

      contentHeight: 0, //内容高
      contentWidth: 0, //内容宽度
      taskRight: 0, //活动入口 右边距
      taskBottom: 10, //活动入口 下边距
      panRight:0, //拖拽点距离 活动入口 右边框距离
      panBottom:0,//拖拽点距离 活动入口 下边框距离

      isTask:false, //turn有任务奖励
    };
  },

  created() {

    jconfig.init(()=>{
      this.initApi();
      this.httpHome();
    },[jconfig.OPT_UP_DOWN]);
    
    //Api更新通知
    globalEvent.addEventListener("apiUp",(e)=>{
      this.initApi();
    });

    //未读消息改变
    globalEvent.addEventListener("unreadMessageChange",(param)=>{
      this.unreadMsg = param.hasMsg;
    });
  },
  
  
  mounted() {

    this.isEnd = weex.config.language == 'en';

    dom.getComponentRect(this.$refs.content, (contentFrame)=>{
      this.contentHeight = contentFrame.size.height;
      this.contentWidth = contentFrame.size.width;
    });

    this.httpTaskList();

    this.httpYear();
  },

  methods: {

    /********************* 初始化*/
    initApi() {
      
      //判断是否录入有API
      japi.getApis('all', 'all', null, (apis)=>{
        this.isApi = (apis.length == 0);
      });
    },

    initData(data) {
      
      //公告
      this.notice = data.noticeMap;

      //活动
      this.activitys = data.activityPageList;

      //策略精选
      this.strategy = data.shopStrategy;

      //榜单
      var rankings = data.userRankList;
      for (let index = 0; index < rankings.length; index++) {
        var map = rankings[index];
        var totalIncome = jmath.chu(map.totalIncome, '100', 2, 2);
        totalIncome = jmath.add0(totalIncome, 2);
        map.totalIncome = totalIncome;
      }
      this.rankings = rankings;

      //文章
      this.article = data.articleMap;

      if (data.btcHavingTime) {
        this.CdCurrentTime = new Date().getTime();
        this.CdEndTime = data.btcHavingTime;
      }

      this.data = data;
    },


    /*************************************************通信触发*/
    //完全显示
    viewappear() {
      this.httpTaskList();
    },

    /********************************** HTTPS*/
    //https首页
    httpHome(){
      if (this.isRefresh) return;
      this.isRefresh = true;
      
      var param = {};
      jhttps.post("systemV2/appHomePage",param,true,(data)=>{
        this.isRefresh = false;
        if(data.status == 200){
          data = data.data;  
          this.initData(data);
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http任务列表
    httpTaskList() {

      var param = {};
      jhttps.post("activity/getTaskList",param,true,(data) => {
        this.isRefresh = false;
        if (data.status == 200) {
          data = data.data;
          for (let index = 0; index < data.taskList.length; index++) {
            var map = data.taskList[index];
            if ((map.isNew || map.type == 'ACHIEVEMENT') && map.status == 'COMPLETED') {
              this.isTask = true;
              return;
            }
          }
          this.isTask = false;
        } else {
        }
      });
    },


    //https 触发年度报告稿
    httpYear(){
      if (!jconfig.isLogin) return;

      var param = {};
      jhttps.post("activity/annualReport",param,true,(data)=>{
        if(data.status == 200){
        }else{
        }
      });
    },

    /********************* 点击*/
    //扫码
    scanClick(){
      if (!jconfig.forceLogin() || this.isScan) return;

      this.isScan = true;
      setTimeout(() => {
        this.isScan = false;
      }, 1000);

      weexFunction.scanCode((str)=>{
        var param = {'str':str};
        jnavigator.open('','ScanVerify', param);
      });
    },

    //v口令点击
    vlinkClick() {
      if (!jconfig.forceLogin()) return;
      
      var param = {'title':T("V口令"),
                   'placeholder':T("长按粘贴V口令"), 
                   'value':'',
                   'max':100};
      jmodal.prompt(param, (value)=>{
        if (!value.length) {
          jmodal.toast(T('输入不能为空'));
          return;
        };

        jvlink.check(value);
      });
    },

    //客服点击
    serveClick(){
      jmodal.toast(T('维护中'))
      // jnavigator.openNative('QYKF');
    },

    
    //消息
    newsClick(){
      if (!jconfig.forceLogin()) return;
      jnavigator.open('', 'mine/NoticeList');
    },

    //登录
    loginClick() {
      jconfig.forceLogin();
    },

    //添加API
    addApiClick() {
      var nav = {'navColor':'#0c0c0c'};
      jnavigator.open('', 'home/ApiAdd', undefined, nav);
    },

    //资产点击
    assetsClick() {
      if (!jconfig.forceLogin()) return;

      var nav = {'navColor':'#0c0c0c'};
      jnavigator.open('', 'home/Api', undefined, nav);
    },

    //功能点击
    functionClick(title){
      if (!jconfig.forceLogin()) return;
      
      if (title == '交易所开户') {
        var nav = {'navColor':'#0c0c0c'};
        var param = {'menu':1};
        jnavigator.open('', 'home/ApiAdd', param, nav);
      } else if (title == '邀请好友') {
        jnavigator.open('', 'invite/Invite');

      } else if (title == '合伙人') {
        jnavigator.open('', 'invite/PartnerRule');

      } else if (title == '添加API') {
        this.addApiClick();

      }  else if (title == '活动中心') {
        var nav = {'navColor':'#0c0c0c'};
        jnavigator.open('', 'mine/Activity', undefined, nav);
      } else if (title == '策略商城') {
        weexFunction.setShowTabBar(1);
        weexFunction.postNotificationName('StrategyShow', {'index':3});

      } else if (title == '策略跟单') {
        weexFunction.setShowTabBar(1);
        weexFunction.postNotificationName('StrategyShow', {'index':2});
        
      } else if (title == '服务器') {
        jnavigator.open('', "server/Server", {}, {'navColor':'#040448'});
      }else if (title == '学院') {
        // jnavigator.open('', 'home/WebView');
        // weexFunction.showWebUrl('https://academy.vtrading.com/');
        weexFunction.openNative('WEB', {'url': 'https://academy.vtrading.com/'});
        
      } else if (title == 'AI提醒助手') {
            var nav = {'navColor':'#0c0c0c'};
        jnavigator.open('', 'aide/aide', undefined, nav);
      }
    },

    //公告点击
    noticeClick(messageId) {
      if (!jconfig.forceLogin()) return;

      if (messageId == undefined) {
        jnavigator.open('', "mine/NoticeList");
      } else {

        var dict = {'messageId':Number(messageId),
                    'type':""};
        var param = {'url':'/systemV2/queryAnnouncementDetail', 
                    'param':dict}
        jnavigator.openNative('HTML', param);
      }
    },

    //活动
    activityClick(item) {
      if (!jconfig.forceLogin()) return;

      if (item.pageType == 'OUT_LINK') {
        weexFunction.showWebUrl(item.activityUrl);
      } else if (item.pageType == 'DIALOG') {
        jnavigator.openDialog(item.activityUrl);
      } else if (item.activityUrl == 'mine/NoticeDetail') {
        jnavigator.open('', item.activityUrl, {'noticeId':item.activityId, 'type':''});
      } else if (item.activityUrl == 'active2201/ActiveYear') {

        var nav = {'navColor':'#0C143D', 'shadowHide':true};
        jnavigator.open('', item.activityUrl, item.param, nav);
      } else {
        jnavigator.open('', item.activityUrl, {'activityId':item.activityId});
      }
    },

    //策略精选
    strategyClick(item){
      if (item == undefined) {
        weexFunction.setShowTabBar(0);
        weexFunction.postNotificationName('StrategyShow', {'index':0});
      } else {
        var param = {'strategyId':item.strategyId};
        jnavigator.open('', 'shop/ShopInfo', param);
      }
    },

    //排行榜
    rankingClick(){
      weexFunction.setShowTabBar(3);
      weexFunction.postNotificationName('SquareShow', {'index':0});
    },
    
    //大V说量化
    dvClick(url){
      weexFunction.showWebUrl(url);
    },

    //任务
    taskClck() {
      if (!jconfig.forceLogin()) return;
      var nav = {'navColor':'#3232F3'};
      jnavigator.open('', 'task/TaskNew', undefined, nav);
    },

    /********************* 手势*/
    //拖拽开始
    startPan(e) {
      if (Array.isArray(e.changedTouches)) {
        e.changedTouches.forEach(item => {
          this.panRight = this.contentWidth - item.pageX - this.taskRight;
          this.panBottom = this.contentHeight - item.pageY - this.taskBottom;
        });
      }
    },

    //拖动中
    movePan(e) {
      if (Array.isArray(e.changedTouches)) {
        e.changedTouches.forEach(item => {
          var taskRight = this.contentWidth - item.pageX - this.panRight;
          var taskBottom = this.contentHeight - item.pageY - this.panBottom;

          var maxRight = this.contentWidth - 200;
          var maxBotton = this.contentHeight - 252 - 88;

          taskRight = taskRight > maxRight ? maxRight : taskRight;
          this.taskRight = taskRight < 0 ? 0 : taskRight;
          
          taskBottom = taskBottom > maxBotton ? maxBotton : taskBottom;
          this.taskBottom = taskBottom < 0 ? 0 : taskBottom;
        });
      }
    },

    //拖拽结束
    endPan(e) {
      if (Array.isArray(e.changedTouches)) {
        e.changedTouches.forEach(item => {
          var taskRight = this.contentWidth - item.pageX - this.panRight;
          var maxRight = this.contentWidth - 200;
          this.taskRight = taskRight > (maxRight / 2) ? maxRight : 0;
        });
      }
    },
  },
};
</script>
